<!--
 * @Author: xujianwei
 * @Date: 2021-04-28 17:53:07
 * @LastEditors: xujianwei
 * @LastEditTime: 2021-05-08 14:22:59
-->
<template>
    <div class="body">
        <div class="dailyVerse-warp">
            <DailyVerse class="left"/>
            <Calendar class="right" />
        </div>
        <canvas ref="mainstage" id='mainstage' width="100vh" height="100vh"></canvas>
        <svg id="weirdFilter">
            <filter id="svgFilter">
                <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.009" numOctaves="5" />
                <feDisplacementMap id="displacement" in="SourceGraphic" scale="200" />
            </filter>
        </svg>
        <div class="info">
            <p >欢迎{{$store.state.user.name}}</p>
            <div class="btns">
                <div><HomeTwoTone /></div>
                <div @click='turn("/note")'><FileTextTwoTone /></div>
                <div><EditTwoTone /></div>
                <div> <SettingTwoTone /></div>
                <div><HeartTwoTone /></div>
            </div>
            <p class="count">网站主页总计被访问 {{ counts }} 次</p>
        </div>
        <div class="bottom">© 2017-{{year}} xldou.cn 版权所有 | <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备16055428号-3</a></div>
    </div>
</template>

<script>
import DailyVerse from '@/components/tip/dailyVerse.tsx'
import Calendar from '@/components/tip/calendar.tsx'
import {ref,onMounted} from 'vue'
import {count } from '@/api/util.ts'
import {
 HomeTwoTone,
 HeartTwoTone,
 SettingTwoTone,
 EditTwoTone,
 FileTextTwoTone
} from '@ant-design/icons-vue';
import {useRouter} from 'vue-router'
export default {
    components:{
        DailyVerse,
        Calendar,
        HomeTwoTone,
        HeartTwoTone,
        SettingTwoTone,
        EditTwoTone,
        FileTextTwoTone
    },
    setup(){
        const router = useRouter()
        const mainstage = ref(null)
        let starArray = [];
        let speedAmplifier = 5;
        let mouseX;
        let canvas,context,height,width;
        let mouseY;
        const initiateStars = (canvas, starArray, calcWidth)=> {
            var starColors = [ { red: 304, green: 304, blue: 304 }, { red:66, green:66, blue:66, }];
            
            for (let y = 0; y < calcWidth; y++) {
            var starAngle = Math.floor(Math.random() * 360) + 0;
            var star = {
                x: Math.floor(Math.random() * width) + 0,
                y: Math.floor(Math.random() * height) + 0,
                color: starColors[Math.floor(Math.random() * starColors.length) + 0],
                angle: starAngle,
                startAngle: starAngle,
                speed: (Math.floor(Math.random() * 12) + 6) / 100
            };
            starArray.push(star);
            }
        }
        let then = Date.now();
        const  update = ()=> {
    
            if (speedAmplifier > 1.1) {
                speedAmplifier = speedAmplifier - 0.1;
            }
            for (let k = 0; k < starArray.length; k++) {
                if (
                starArray[k].y < -1 ||
                starArray[k].y > height + 1 ||
                starArray[k].x < -1 ||
                starArray[k].x > width + 1
                ) {
                var remainder = starArray[k].angle % 90;
                starArray[k].angle = starArray[k].angle + 90 + remainder;
                starArray[k].startAngle = starArray[k].angle;
                } else {
                starArray[k].angle = starArray[k].startAngle;
                }
            calculateStarMovement(starArray[k]);
            }
        }
         //render function to draw the canvas when frame is updated.
        function render() {
            var distance = 150;
            //clear the canvas.
            context.clearRect(0, 0, width, height);
            //Run through the stars
            for (let i = 0; i < starArray.length; i++) {
            //draw the stars individual points
            drawSingleStar(starArray[i], context);
            }
            //double for loop to check each star against all the others.
            for (let k = 0; k < starArray.length; k++) {
            for (let u = 0; u < starArray.length; u++) {
                if (
                //check the distance between the two points
                starArray[k].x >= starArray[u].x - distance &&
                starArray[k].x <= starArray[u].x + distance &&
                starArray[k].y >= starArray[u].y - distance &&
                starArray[k].y <= starArray[u].y + distance &&
                // and make sure it's not the same star
                u != k
                ) {
                //if they are within the range set, calculate their distance and draw line with color and opacity matching distance and color difference between them.
                var a = starArray[k].x - starArray[u].x;
                var b = starArray[k].y - starArray[u].y;
                //calculate the opacity based on distance.
                var opacity = 1 - 1 / distance * Math.sqrt(a * a + b * b);
                var red = Math.round((starArray[k].color.red + starArray[u].color.red) / 2);
                var green = Math.round((starArray[k].color.green + starArray[u].color.green) / 2);
                var blue = Math.round((starArray[k].color.blue + starArray[u].color.blue) / 2);
                // set color of the line based on the middle value of red, green and blue from the two points.
                context.strokeStyle = "rgba(" + red + "," + green + "," + blue + "," + opacity + ")";
                context.beginPath();
                context.lineWidth = 3;
                context.moveTo(starArray[k].x, starArray[k].y);
                context.lineTo(starArray[u].x, starArray[u].y);
                context.stroke();
                }
            }
            }
        }

        //calculate the movement forward based on angle and speed.
        const calculateStarMovement = (target)=> {
            if (
                mouseX >= target.x - 500 &&
                mouseX <= target.x + 500 &&
                mouseY >= target.y - 500 &&
                mouseY <= target.y + 500
            ) {
                target.x -= target.speed * speedAmplifier * Math.sin(target.angle * (Math.PI / 180));
                target.y += target.speed * speedAmplifier * Math.cos(target.angle * (Math.PI / 180));
            } else {
                target.x -= target.speed * Math.sin(target.angle * (Math.PI / 180));
                target.y += target.speed * Math.cos(target.angle * (Math.PI / 180));
            }
        }


        const drawSingleStar = (star, context)=> {
            context.fillStyle = "rgba(" + star.color.red + "," + star.color.green + "," + star.color.blue + "," + 0.1 + ")";
            context.beginPath();
            context.arc(star.x, star.y, 5, 0, 2 * Math.PI);
            context.closePath();
            context.fill();
        }
        const main = ()=> {
            let now = Date.now();
            let delta = now - then;
            update();
            render();
            then = now;
            requestAnimationFrame(main);
        }
        onMounted(async () => {
            let calcWidth
            width = document.body.clientWidth
            height = document.body.clientHeight
            mainstage.value.height = document.body.clientHeight
            mainstage.value.width = width
            calcWidth = width / 10;
            context =   mainstage.value.getContext("2d");
            initiateStars( mainstage.value, starArray, calcWidth);
            main()
            let {data = 0} = await count()
            counts.value = data
        })
        const year = new Date().getFullYear()
        let counts = ref(0)
        const turn = path =>{
            router.push(path)
        }
        return{
            mainstage,
            year,
            counts,
            turn
        }
    },
}
</script>

<style lang='scss' scoped>
.body {
  margin:0px;
  height:100vh;
  padding:0px;
  overflow:hidden;
}

#svgFilter {
  width:100%;
  height:100vh;
  position:absolute;
  top:0px;
}

#mainstage {
  overflow:hidden;
  margin:0px;
  padding:0px;
//   background-color: #f5f5f5;
  filter:blur(5px) url(#svgFilter);
  transform:scale(1.1);
}
.dailyVerse-warp{
    width: 100%;
    display: flex;
     justify-content: space-between;
    position: absolute;
    top:30px;
    right:00px;
    padding:0 50px;
    .left{
        max-width: 30%;
    }
}
.bottom{
    position: absolute;
    width: 100%;
    text-align: center;
    bottom:10px;
    font-size: 14px;
    color: #aaa;
    a{
        color: #ccc;
    }
}
.info{
    position: absolute;
    bottom:80px;
    right:50px;
    p{
        text-align: center;
        font-size: 14px;
        margin-bottom: 20px;
    }
    .btns{
        display: flex;
        justify-content: space-evenly;  
        font-size: 18px; 
        width: 200px;
        div{
            cursor: pointer;
        }
    }
    .count{
        font-size: 12px;
        color: #ddd;
    }
}
</style>